<template>
  <!-- 创建圈子 选择行业页面 -->
  <view class="main">
    <view class="list">
      <view class="left">
        <view
          :class="[activeLeft == index ? 'item active' : 'item']"
          v-for="(item, index) in industryList"
          :key="index"
          @click="handleIndex(index, item.id)"
        >
          <text>{{ item.industry }}</text>
        </view>
      </view>
      <view class="right">
        <view
          class="item"
          v-for="(item1, index1) in industryList[activeLeft].industryDtoList"
          :key="index1"
          @click="handleIndex1(index1, item1.id)"
        >
          <view class="row">
            <view :class="[activeRight == index1 ? 'one active1' : 'one']">
              {{ item1.industry }}
            </view>
            <view class="two" v-if="activeRight == index1">
              <icon type="success_no_circle" size="15" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn" @tap="save"> 保存 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activeLeft: 0,
      activeRight: 666,
      industryList: [{ industryDtoList: [] }],
    };
  },
  onLoad() {
    this.handleHang();
  },
  methods: {
    handleHang() {
      //行业接口
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/personalSpace/getIndustryList",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          console.log(res, "行业");
          if (res.data.code == 200) {
            this.industryList = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleIndex(index, id) {
      //左侧tab栏
      this.activeRight = 666;
      this.activeLeft = index;
    },
    handleIndex1(index, id) {
      //右侧tab栏
      console.log(id);
      this.activeRight = index;
    },
    save() {
      uni.navigateBack({
        delta: 1,
      });
      uni.setStorage({
        key: "quanzihangye",
        data: this.industryList[this.activeLeft].industryDtoList[
          this.activeRight
        ],
        success: function () {
          // console.log('success');
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}

.list {
  width: 100%;
  border-top: 2rpx solid #eee;
  position: fixed;
  top: 86rpx;
  bottom: 60px;
  display: flex;
  justify-content: space-between;

  .left {
    border-top: 2rpx solid #eee;
    height: 100%;
    width: 270rpx;
    overflow: auto;
    flex-shrink: 0;
    background-color: #fff;

    .item {
      font-size: 26rpx;
      line-height: 37rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(70, 70, 70, 1);
      width: 100%;
      padding: 32rpx 0;

      text {
        display: inline-block;
        width: 179rpx;
        margin-left: 32rpx;
      }
    }

    .active {
      position: relative;
      color: #2168eb;
    }

    .active::before {
      content: "";
      display: block;
      height: 36rpx;
      width: 6rpx;
      background: #2168eb;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-9px);
    }
  }

  > .right {
    border-top: 2rpx solid #eee;
    width: 480rpx;
    overflow: auto;

    .row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 42rpx;
      box-sizing: border-box;
      align-items: center;

      .one {
        background-color: rgba(248, 248, 250, 1);
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(70, 70, 70, 1);
      }

      .active1 {
        color: #2168eb;
      }

      .two {
        width: 30rpx;
        height: 30rpx;
        position: relative;
        top: -20rpx;
      }
    }
  }
}

.btn {
  width: 600rpx;
  height: 74rpx;
  background: #2168eb;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  z-index: 666;
  transform: translateX(-50%);
}
</style>
